<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			/* 取消默认样式 */
			ul {
				list-style: none;
			}
			/* 取消下划线 */
			a {
				text-decoration: none;
			}
			/* 清除浮动 */
			.clearfix:before,.clearfix:after {
				content: "";
				display: table;
			}
			.clearfix:after {
				clear: both;
			}
			/* 背景颜色 */
			body {
				margin: 0;
				background-color: #f3f5f7;
			}
			/* 导航栏 */
			.nav {
				width: 1200px;
				height: 42px;
				line-height: 42px;
				margin: 30px auto;
			}
			/* 网页logo */
			.nav img:first-child {
				float: left;
				width: 198px;
				height: 42px;
			}
			/* 导航栏部分标签 */
			.nav ul {
				float: left;
				margin: 0 0 0 60px;
			}
			/* 标签样式 */
			.nav ul li {
				display: inline-block;
				margin: 0 15px;
			}
			.nav ul li a {
				height: 42px;
				line-height: 42px;
				color: #050505;
				font-size: 18px;
				padding: 10px;
			}
			.nav ul li a:hover {
				color: #00a4ff;
				border-bottom: 2px solid #00a4ff;
			}
			/* 搜索框样式 */
			.nav input {
				float: left;
				width: 295px;
				height: 40px;
				margin: 0 0 0 60px;
				border: 1px solid #00a4ff;
				color: #bfbfbf;
				font-size: 14px;
				padding-left: 15px;
			}
			.nav input:focus {
				outline: none;
				border: 1px solid #aa0088;
			}
			/* 搜索图标 */
			.nav button {
				float: left;
				width: 50px;
				height: 42px;
				background-image: url(https://hugp.top/images/btn.png);
				border: 0;
			}
			/* 用户头像 */
			.nav img:last-child {
				float: left;
				width: 30px;
				margin: 6px 2px 6px 15px;
			}
			/* 轮播图部分样式 */
			.main {
				height: 421px;
				padding: 0 170px;
				background: url(https://hugp.top/images/banner2.png) no-repeat top center;
				background-color: #1c036c;
			}
			/* 左侧导航栏部分样式 */ 
			.main div:first-child {
				float: left;
				width: 190px;
				height: 421px;
				background-color: rgba(0, 0, 0, .3);
			}
			/* 标签样式 */
			.main div:first-child a {
				display: block;
				height: 45px;
				line-height: 45px;
				padding: 0 20px;
				color: #fff;
				font-size: 14px;
			}
			.main span:last-child {
				float: right;
			}
			.main div:first-child a:hover {
				color: #00a4ff;
			}
			/* 右侧卡片样式 */
			.main div:last-child {
				float: right;
				width: 230px;
				height: 300px;
				background-color: #fff;
				margin-top: 50px;
			}
			/* 标题样式 */
			.main div:last-child h2 {
				color: #fff;
				background-color: #9bceea;
				height: 48px;
				line-height: 48px;
				text-align: center;
				font-size: 18px;
			}
			/* 课程部分样式 */
			.main div:last-child li a {
				display: block;
				width: 190px;
				margin: 0 20px;
				padding: 13px 0;
				border-bottom: 1px solid #ccc;
			}
			.main div:last-child li h4 {
				font-size: 16px;
				color: #4e4e4e;
			}
			.main div:last-child li p {
				font-size: 12px;
				color: #a5a5a5;
			}
			/* 课程卡片底部按钮样式 */
			.main .all{
				display: block;
				width: 190px;
				height: 38px;
				line-height: 38px;
				text-align: center;
				border: 1px solid #00a4ff;
				color: #00a4ff;
				font-size: 16px;
				font-weight: 700;
				margin: 10px 20px;
			}
			.main .all:hover {
				color: #fff;
				background-color: #00a4ff;
			}
			.classify {
				width: 1200px;
				height: 60px;
				line-height: 60px;
				margin: 10px auto;
				padding: 0 30px;
				background-color: #fff;
				box-sizing: border-box;
				box-shadow: 1px 1px 0 1px rgba(0, 0, 0, .1) ;
			}
			.classify h3,
			.classify ul,
			.classify li {
				float: left;
			}
			.classify h3 a{
				font-size: 16px;
				color: #00a4ff;
				margin-right: 30px;
			}
			.classify li a {
				color: #050505;
				padding: 0 30px;
				border-left: 1px solid #ccc;
			}
			.classify h4 a{
				float: right;
				color: #00a4ff;
				font-size: 14px;
				font-weight: 500;
			}
			.fine {
				width: 1200px;
				margin: 30px auto;
				
			}
			.fine-title {
				height: 45px;
			}
			.fine-title h2 {
				float: left;
			}
			.fine-title a {
				float: right;
				margin-right: 30px;
				color: #ccc;
				font-size: 12px;
			}
			.fine-content li,
			.pro-bd .content li,
			.mac-content li {
				float: left;
				width: 228px;
				height: 270px;
				margin: 0 15px 15px 0;
				background-color: #fff;
				box-sizing: border-box;
				box-shadow: 0 4px 5px rgba(0, 0, 0, .2) ;
			}
			.fine-content li:last-child,
			.pro-bd .content li:last-child,
			.mac-content li:last-child{
				margin-right: 0;
			}
			.fine-content img:first-child,
			.pro-bd .content li img:first-child,
			.mac-content img:first-child {
				width: 228px;
				height: 152px;
			}
			.fine-content li div:first-child {
				position: relative;
			}
			.fine-content li div:first-child img:last-child {
				position: absolute;
				top: 4px;
				right: -4px;
			}
			.fine-content li div:last-child,
			.pro-bd .content li div:last-child,
			.mac-content li div:last-child {
				padding: 20px;
				height: 120px;
				box-sizing: border-box;
				color: #999;
				font-size: 12px;
			}
			.fine-content li div:last-child div,
			.pro-bd .content li div:last-child div,
			.mac-content li div:last-child div {
				padding: 0;
				height: 0;
				margin-top: 20px;
			}
			.fine-content li div:last-child h4,
			.pro-bd .content li div:last-child h4,
			.mac-content li div:last-child h4{
				color: #050505;
				font-size: 14px;
				font-weight: 500;
			}
			.fine-content li div:last-child span,
			.pro-bd .content li div:last-child span,
			.mac-content li div:last-child span{
				color: #ff7c2d;
			}
			.pro,
			.mac {
				width: 1200px;
				margin: 0 auto;
			}
			.pro-hd,
			.mac-hd {
				width: 1200px;
				height: 45px;
				line-height: 45px;
			}
			.pro-hd h3,
			.mac-hd h3{
				float: left;
			}
			.pro-hd ul,
			.mac-hd ul{
				margin-left: 350px;
			}
			.pro-hd li,
			.mac-hd li{
				float: left;
				margin-left: 70px;
			}
			.mac-hd li a,
			.pro-hd li a {
				color: #868686;
			}
			.pro-hd li a:hover,
			.mac-hd li a:hover{
				color: #00a4ff;
			}
			.pro-hd span,
			.mac-hd span {
				float: right;
			}
			.pro-hd span a,
			.mac-hd span a{
				color: #a5a5a5;
				font-size: 12px;
				margin-right: 30px;
			}
			.pro-bd .left {
				width: 228px;
				height: 392px;
				float: left;
			}
			.right {
				float: right;
			} 
			.pro-bd .content li {
				margin-top: 18px;
			}
			.footer {
				background-color: #fff;
			}
			.footer-w {
				width: 1200px;
				margin: 0 auto;
				padding: 35px 0;
			}
			.footer-left {
				float: left;
				color: #666;
				font-size: 12px;
			}
			.footer-left a {
				display: block;
				width: 120px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				color: #00a4ff;
				border: 1px solid #00a4ff;
				font-size: 16px;
			}
			.footer-left a:hover {
				color: #fff;
				background-color: #00a4ff;
			}
			.footer-left p {
				margin: 20px 0 15px;
			}
			.footer-right {
				float: right;
			}
			.footer-right div {
				float: left;
				margin-left: 100px;
			}
			.footer-right dt {
				font-size: 16px;
				color: #050505;
				margin-bottom: 5px;
			}
			.footer-right dd a {
				font-size: 12px;
				color: #333;
			}
			.footer-right dd a:hover {
				color: #00a4ff;
			}
		</style>
	</head>
	<body>
		<!-- 导航栏 -->
		<div class="nav">
			<img src="https://hugp.top/images/%E5%AD%A6%E6%88%90%E5%9C%A8%E7%BA%BF.png" alt="学成在线">
			<div>
				<ul>
					<li><a href="">首页</a></li>
					<li><a href="">课程</a></li>
					<li><a href="">职业规划</a></li>
				</ul>
			</div>
			<input type="text" name="搜索" id="search">
			<button></button>
			<img src="https://hugp.top/images/user.png" alt="头像">username
		</div>
		<!-- 轮播图 -->
		<div class="main clearfix">
			<!-- 左侧导航栏 -->
			<div>
				<ul>
					<li><a href="">
						<span>前端开发</span>
						<span>></span>
					</a></li>
					<li><a href="">
						<span>后端开发</span>
						<span>></span>
					</a></li>
					<li><a href="">
						<span>移动开发</span>
						<span>></span>
					</a></li>
					<li><a href="">
						<span>人工智能</span>
						<span>></span>
					</a></li>
					<li><a href="">
						<span>商业预测</span>
						<span>></span>
					</a></li>
					<li><a href="">
						<span>云计算&大数据</span>
						<span>></span>
					</a></li>
					<li><a href="">
						<span>运维&测试</span>
						<span>></span>
					</a></li>
					<li><a href="">
						<span>UI设计</span>
						<span>></span>
					</a></li>
					<li><a href="">
						<span>产品</span>
						<span>></span>
					</a></li>
				</ul>
			</div>
			<!-- 右侧课程表卡片 -->
			<div>
				<h2>我的课程表</h2>
				<ul>
					<li><a href="">
						<h4>继续学习 程序设计语言</h4>
						<p>正在学习-使用对象</p>
					</a></li>
					<li><a href="">
						<h4>继续学习 程序设计语言</h4>
						<p>正在学习-使用对象</p>
					</a></li>
					<li><a href="">
						<h4>继续学习 程序设计语言</h4>
						<p>正在学习-使用对象</p>
					</a></li>
				</ul>
				<a href="" class="all">全部课程</a>
			</div>
		</div>
		<!-- 小导航栏 -->
		<div class="classify">
			<h3><a href="">精品推荐</a></h3>
			<ul>
				<li><a href="">jQuery</a></li>
				<li><a href="">Spark</a></li>
				<li><a href="">MySQL</a></li>
				<li><a href="">JavaWeb</a></li>
				<li><a href="">spring boot</a></li>
				<li><a href="">vue</a></li>
			</ul>
			<h4><a href="">修改兴趣</a></h4>
		</div>
		<!-- 精品推荐 -->
		<div class="fine">
			<div class="fine-title">
				<h2>精品推荐</h2>
				<a href="">查看全部</a>
			</div>
			<div class="fine-content">
				<ul class="clearfix">
					<li><a href="">
						<div>
							<img src="https://hugp.top/images/pic.png" alt="">
							<img src="https://hugp.top/images/hot.png" alt="">
						</div>
						<div>
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div><span>高级</span> • 1125人在学习</div>
						</div>
					</a></li>
					<li><a href="">
						<div>
							<img src="https://hugp.top/images/pic.png" alt="">
							<img src="https://hugp.top/images/hot.png" alt="">
						</div>
						<div>
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div><span>高级</span> • 1125人在学习</div>
						</div>
					</a></li>
					<li><a href="">
						<div>
							<img src="https://hugp.top/images/pic.png" alt="">
							<img src="https://hugp.top/images/hot.png" alt="">
						</div>
						<div>
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div><span>高级</span> • 1125人在学习</div>
						</div>
					</a></li>
					<li><a href="">
						<div>
							<img src="https://hugp.top/images/pic.png" alt="">
							<img src="https://hugp.top/images/hot.png" alt="">
						</div>
						<div>
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div><span>高级</span> • 1125人在学习</div>
						</div>
					</a></li>
					<li><a href="">
						<div>
							<img src="https://hugp.top/images/pic.png" alt="">
							<img src="https://hugp.top/images/hot.png" alt="">
						</div>
						<div>
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div><span>高级</span> • 1125人在学习</div>
						</div>
					</a></li>
				</ul>
				<ul class="clearfix">
					<li><a href="">
						<div>
							<img src="https://hugp.top/images/pic.png" alt="">
							<img src="https://hugp.top/images/hot.png" alt="">
						</div>
						<div>
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div><span>高级</span> • 1125人在学习</div>
						</div>
					</a></li>
					<li><a href="">
						<div>
							<img src="https://hugp.top/images/pic.png" alt="">
							<img src="https://hugp.top/images/hot.png" alt="">
						</div>
						<div>
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div><span>高级</span> • 1125人在学习</div>
						</div>
					</a></li>
					<li><a href="">
						<div>
							<img src="https://hugp.top/images/pic.png" alt="">
							<img src="https://hugp.top/images/hot.png" alt="">
						</div>
						<div>
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div><span>高级</span> • 1125人在学习</div>
						</div>
					</a></li>
					<li><a href="">
						<div>
							<img src="https://hugp.top/images/pic.png" alt="">
							<img src="https://hugp.top/images/hot.png" alt="">
						</div>
						<div>
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div><span>高级</span> • 1125人在学习</div>
						</div>
					</a></li>
					<li><a href="">
						<div>
							<img src="https://hugp.top/images/pic.png" alt="">
							<img src="https://hugp.top/images/hot.png" alt="">
						</div>
						<div>
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div><span>高级</span> • 1125人在学习</div>
						</div>
					</a></li>
				</ul>
			</div>
		</div>
		<!-- 编程入门和数据分析师部分 -->
		<div class="pro clearfix">
			<div class="pro-hd">
				<h3>编程入门</h3>
				<ul>
					<li><a href="">热门</a></li>
					<li><a href="">初级</a></li>
					<li><a href="">中级</a></li>
					<li><a href="">高级</a></li>
				</ul>
				<span><a href="">查看全部</a></span>
			</div>
			<div class="pro-bd clearfix">
				<div class="left"><img src="https://hugp.top/images/c-pic1.png" alt=""></div>
				<div class="right">
					<div class="top"><img src="https://hugp.top/images/c-pic.png" alt=""></div>
					<div class="content">
						<ul class="clearfix">
							<li><a href="">
								<div>
									<img src="https://hugp.top/images/c-cip4.png" alt="">
								</div>
								<div>
									<h4>Unity Profiler入门</h4>
									<div><spaUnity Profiler入门n>高级</span> • 1125人在学习</div>
								</div>
							</a></li>
							<li><a href="">
								<div>
									<img src="https://hugp.top/images/c-cip4.png" alt="">
								</div>
								<div>
									<h4>Unity Profiler入门</h4>
									<div><span>高级</span> • 1125人在学习</div>
								</div>
							</a></li>
							<li><a href="">
								<div>
									<img src="https://hugp.top/images/c-cip4.png" alt="">
								</div>
								<div>
									<h4>Unity Profiler入门</h4>
									<div><span>高级</span> • 1125人在学习</div>
								</div>
							</a></li>
							<li><a href="">
								<div>
									<img src="https://hugp.top/images/c-cip4.png" alt="">
								</div>
								<div>
									<h4>Unity Profiler入门</h4>
									<div><span>高级</span> • 1125人在学习</div>
								</div>
							</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="pro-hd">
				<h3>数据分析师</h3>
				<ul>
					<li><a href="">热门</a></li>
					<li><a href="">初级</a></li>
					<li><a href="">中级</a></li>
					<li><a href="">高级</a></li>
				</ul>
				<span><a href="">查看全部</a></span>
			</div>
			<div class="pro-bd clearfix">
				<div class="left"><img src="https://hugp.top/images/c-pic1.png" alt=""></div>
				<div class="right">
					<div class="top"><img src="https://hugp.top/images/c-pic.png" alt=""></div>
					<div class="content">
						<ul class="clearfix">
							<li><a href="">
								<div>
									<img src="https://hugp.top/images/c-pic3.png" alt="">
								</div>
								<div>
									<h4>Kami2首页界面切换效果</h4>
									<div><span>高级</span> • 1125人在学习</div>
								</div>
							</a></li>
							<li><a href="">
								<div>
									<img src="https://hugp.top/images/c-pic3.png" alt="">
								</div>
								<div>
									<h4>Kami2首页界面切换效果</h4>
									<div><span>高级</span> • 1125人在学习</div>
								</div>
							</a></li>
							<li><a href="">
								<div>
									<img src="https://hugp.top/images/c-pic3.png" alt="">
								</div>
								<div>
									<h4>Kami2首页界面切换效果</h4>
									<div><span>高级</span> • 1125人在学习</div>
								</div>
							</a></li>
							<li><a href="">
								<div>
									<img src="https://hugp.top/images/c-pic3.png" alt="">
								</div>
								<div>
									<h4>Kami2首页界面切换效果</h4>
									<div><span>高级</span> • 1125人在学习</div>
								</div>
							</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 机器学习工程师部分 -->
		<div class="mac">
			<div class="mac-hd">
				<h3>机器学习工程师</h3>
				<ul>
					<li><a href="">热门</a></li>
					<li><a href="">初级</a></li>
					<li><a href="">中级</a></li>
					<li><a href="">高级</a></li>
				</ul>
				<span><a href="">查看全部</a></span>
			</div>
			<div class="mac-content">
				<ul class="clearfix">
					<li><a href="">
						<div>
							<img src="https://hugp.top/images/pic2.png" alt="">
						</div>
						<div>
							<h4>Android Hybrid APP开发实战 H5+原生</h4>
							<div><span>高级</span> • 1125人在学习</div>
						</div>
					</a></li>
					<li><a href="">
						<div>
							<img src="https://hugp.top/images/pic2.png" alt="">
						</div>
						<div>
							<h4>Android Hybrid APP开发实战 H5+原生</h4>
							<div><span>高级</span> • 1125人在学习</div>
						</div>
					</a></li>
					<li><a href="">
						<div>
							<img src="https://hugp.top/images/pic2.png" alt="">
						</div>
						<div>
							<h4>Android Hybrid APP开发实战 H5+原生</h4>
							<div><span>高级</span> • 1125人在学习</div>
						</div>
					</a></li>
					<li><a href="">
						<div>
							<img src="https://hugp.top/images/pic2.png" alt="">
						</div>
						<div>
							<h4>Android Hybrid APP开发实战 H5+原生</h4>
							<div><span>高级</span> • 1125人在学习</div>
						</div>
					</a></li>
					<li><a href="">
						<div>
							<img src="https://hugp.top/images/pic2.png" alt="">
						</div>
						<div>
							<h4>Android Hybrid APP开发实战 H5+原生</h4>
							<div><span>高级</span> • 1125人在学习</div>
						</div>
					</a></li>
				</ul>
			</div>
		</div>
		<!-- 底部 -->
		<div class="footer">
			<div class="footer-w clearfix">
				<div class="footer-left">
					<img src="https://hugp.top/images/%E5%AD%A6%E6%88%90%E5%9C%A8%E7%BA%BF.png" alt="">
					<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程<br>
					@2017年XTCG Inc.保留所有权利。渝ICP备2022002010号</p>
					<a href="">下载app</a>
				</div>
				<div class="footer-right">
					<div>
						<dl>
							<dt>关于学成网</dt>
							<dd><a href="">关于</a></dd>
							<dd><a href="">管理团队</a></dd>
							<dd><a href="">工作计划</a></dd>
							<dd><a href="">客户服务</a></dd>
							<dd><a href="">帮助</a></dd>
						</ul>
					</div>
					<div>						
						<dl>
							<dt>新手指南</dt>
							<dd><a href="">如何注册</a></dd>
							<dd><a href="">如何选课</a></dd>
							<dd><a href="">如何拿到毕业证</a></dd>
							<dd><a href="">学分是什么</a></dd>
							<dd><a href="">考试未通过怎么办</a></dd>
						</dl>
					</div>
					<div>						
						<dl>
							<dt>合作伙伴</dt>
							<dd><a href="">合作机构</a></dd>
							<dd><a href="">合作导师</a></dd>
						</dl>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>